<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i>{{$route.name}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          :model="addForm"
          :rules="rules"
          ref="addForm"
        >
          <el-form-item
            label="名称"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input
              type="text"
              v-model="addForm.name"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="父级类型"
            :label-width="formLabelWidth"
          >
            <el-select
              v-model="addForm.parentId"
              placeholder="请选择父级类型"
            >
              <el-option
                v-for="(item,index) in adTypes"
                :key="item.name"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="内容"
            :label-width="formLabelWidth"
          >
            <el-input
              type="textarea"
              v-model="addForm.content"
              auto-complete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="add"
          >确 定</el-button>
        </div>
      </el-dialog>
      <el-input
        placeholder="输入标题"
        class="search"
        v-model="searchKey"
      ></el-input>
      <el-button
        type="primary"
        icon="search"
        @click="search"
      >搜索</el-button>
      <el-button
        type="primary"
        @click="addType"
      >新增类型</el-button>
    </div>
    <div>
      <el-table
        :data="dataSource"
        border
        fit
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="parentName"
          label="父级广告名称"
          show-overflow-tooltip
          empty-text
        >
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          show-overflow-tooltip
          empty-text
          :formatter="stateFormatter"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="edit(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="delNotice(scope.row)"
            >删除</el-button>
            <el-switch
              v-model="scope.row.state === 1 ? true : false"
              active-color="#13ce66"
              @change="switchChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page.number"
        layout="total, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { getAdTypes, editAdType, delAdType, editState, getParentAdTypes } from "../../server/getDate.js";
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      addForm: {},
      formLabelWidth: '120px',
      searchKey: '',
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.allType(1)
    this.allThemeAdType()
  },
  computed: mapState({
    dataSource: state => state.ThemeAd.typeList,
    page: state => state.ThemeAd.typePage,
    adTypes: state => state.ThemeAd.adTypeList
  }),
  methods: {
    ...mapActions(['saveAdTypes', 'saveParentAdTypes']),
    allThemeAdType() {
      const params = {
        page: 1,
        pageSize: 100
      }
      getParentAdTypes({ ...params }).then(res => {
        if (res.code === '000000') {
          this.saveParentAdTypes(res)
        } else {
          this.$message.error(res.message)
        }
      }, err => this.$message.error(err.message))
    },
    allType(number) {
      const params = {
        page: number,
        pageSize: 10
      }
      if (this.searchKey !== '') {
        params.searchKey = this.searchKey
      }
      getAdTypes({ ...params }).then(res => {
        if (res.code === '000000') {
          this.saveAdTypes({
            ...res,
            number
          })
        } else {
          this.$message.error(res.message)
        }
      }, err => this.$message.error(err.message))
    },
    search() {
      this.allType(this.page.number)
    },
    edit(row) {
      this.dialogFormVisible = true
      this.title = '修改类型'
      console.log('row', row)
      this.addForm = {
        id: row.id,
        name: row.name,
        parentId: row.parent_id
      }
    },
    handleCurrentChange(val) {
      this.allType(val)
    },
    stateFormatter(row) {
      const state = row.state
      return state === 1 ? '启用' : '禁用'
    },
    delNotice(row) {
      this.$confirm('此操作将永久删除该名称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAdType({ id: row.id }).then(res => {
          if (res.code === '000000') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.allType(this.page.number)
          } else {
            this.$message.error(res.message)
          }
        }, err => this.$message.error(err.message))
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    add() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateType()
          } else {
            this.addAction()
          }
        }
      })
    },
    addAction() {
      this.dialogFormVisible = false
      editAdType({ ...this.addForm }).then(res => {
        if (res.code === '000000') {
          this.$message.success('添加成功')
          this.allType(this.page.number)
        } else {
          this.$message.error(res.message)
        }
      }, err => this.$message.error(err.message))
    },
    updateType() {
      this.dialogFormVisible = false
      const params = {
        id: this.addForm.id,
        name: this.addForm.name,
        parentId:this.addForm.parentId
      }
      editAdType({ ...params }).then(res => {
        if (res.code === '000000') {
          this.$message.success('修改成功')
          this.allType(this.page.number)
        } else {
          this.$message.error(res.message)
        }
      }, err => this.$message.error(err.message))
    },
    addType() {
      this.dialogFormVisible = true
      this.title = '新增类型'
      this.addForm = {}
    },
    switchChange(row) {
      editState({
        id: row.id
      }).then(res => {
        if (res.code === '000000') {
          this.$message.success('修改成功')
          this.allType(this.page.number)
        } else {
          this.$message.error(res.message)
        }
      }, () => {
        this.$message.error('网络错误')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>
